<template>
  <v-chart :options="lineOption" class="echarts"/>
</template>

<style>
  /**
   * 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
   * 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
   */
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  // 导入绘图组件 需要安装 vue-echart echart
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/grid'
  import 'echarts/lib/component/toolbox'

  export default {
    components: {
      'v-chart': ECharts
    },
    props: ['lineData'],
    data() {
      return {
        lineOption: null,
        // xChick:['1', '2', '3', '4', '5', '6', '7'],
        // // 真实值数据
        // dataX1:[120, 132, 101, 134, 90, 230, 210],
        // // 预测值数据
        // dataX2:[220, 182, 191, 234, 290, 330, 710]
        xChick:null,
        dataX1:null,
        dataX2:null
      }
    },

    created() {


    },
    mounted() {
      // let _this = this;
      // window.onresize = function () {
      //   _this.lineOption.resize()
      //   console.log("###################",this.lineOption.title)
      // }
      // console.log("@@@@@@@@#",this.lineOption.height)
    },
    methods: {
      // 接收参数绘制图形
      drawLine(eData){
        // 判断是否接收到数据
        if(eData["column1"]!==null){
          // 生成xChicks的值,为lineData的长度的数组1-length的刻度
          let arraySize = eData["column1"].length
          let arrayData = new Array(arraySize).keys()
          this.xChick = Array.from(arrayData)
          // 将接收的lineData值传递并

          this.dataX1 = eData["column1"]
          this.dataX2 = eData["column2"]
          this.setChartOpention()
        }else{
          console.log("暂时无数据")
          this.lineOption ={ }
        }
      },
      // 设置绘图参数
      setChartOpention() {
        let option = {
          title: {
            text: '折线图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['折线1', '折线2']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xChick
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '折线1',
              type: 'line',
              stack: '总量',
              data: this.dataX1
            },
            {
              name: '折线2',
              type: 'line',
              stack: '总量',
              itemStyle : {
                normal : {
                  color: 'green',  //折线点颜色设置
                  lineStyle:{
                    color:'green'  //折线颜色设置
                  }
                }
              },
              data: this.dataX2
            }
          ]
        }
        this.lineOption = option
      }

    }
  }
</script>
